<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease iconfont" v-show="hasCount" @click.stop.prevent="decreaseCart">
          <span class="inner">&#xe780;</span>
      </div>
    </transition>
    <div class="cart-count" v-show="hasCount">{{food.count}}</div>
    <div class="cart-add iconfont" @click.stop.prevent="addCart">&#xe845;</div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CartControl',
  props: {
    food: Object
  },
  methods: {
    addCart () {
      if (!this.food.count) {
        Vue.set(this.food, 'count', 1)
      } else {
        this.food.count++
      }
    },
    decreaseCart () {
      if (this.food.count > 0) {
        this.food.count--
      }
    }
  },
  computed: {
    hasCount () {
      return this.food.count > 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  .cartcontrol
    font-size:0
    .cart-decrease
      display:inline-block
      padding:6px
      transition:all 0.5s linear
      .inner
        display:inline-block
        font-size:24px
        line-height:24px
        color:rgb(0,160,220)
      &.move-transition
        opacity: 1
        transform:translate3D(0,0,0)
      &.move-enter,&.move-leave-active
        opacity: 0
        transform:translate3D(24px,0,0)
    .cart-count
      display:inline-block
      width:12px
      padding-top:6px
      line-height:24px
      text-align:center
      vertical-align:top
      font-size:10px
      color:rgb(147,153,159)
    .cart-add
      display:inline-block
      padding:6px
      line-height:24px
      font-size:24px
      display:inline-block
      color:rgb(0,160,220)
</style>
